<template>
  <div class="app-box">
    <a-card class="card" title="日志记录">
      <div >
        <a-form autocomplete="off" class="search" style="display: flex;">
          <a-form-item
              label="关键字" name="keyword" style="width: 200px;"
          >
            <a-input v-model:value="pagination.keyword"/>
          </a-form-item>
          <a-form-item style="margin: 0 10px">
          <a-button @click="onSearch">搜索</a-button>
          </a-form-item>
          <a-form-item>
            <a-button
                      @click="loadData">刷新列表
            </a-button>
          </a-form-item>

          <a-form-item style="margin-left: 10px">
            <a-button
                      @click="delAll">删除所有
            </a-button>
          </a-form-item>
        </a-form>
      </div>

      <a-table :loading="dataLoading" :columns="columns" rowKey="id" :data-source="currentDataList"
               :pagination="pagination"
               :locale="{emptyText: '暂无直播信息'}"
               @change="handleTableChange"
               class="scroll-box"
               :scroll="{ x: 10 }">
        <template #bodyCell="{ column ,record}">
          <template v-if="column.key === 'createTime'">
            {{ new Date(record.createTime).toLocaleString() }}
          </template>
          <template v-if="column.key === 'message'">
            <div>
              <div>
                <a-tag color="green" v-if="record.level==='SUCCESS'">{{ record.typeDesc }}</a-tag>
                <a-tag color="red" v-if="record.level==='ERROR'">{{ record.typeDesc }}</a-tag>
              </div>
              <div>
                {{record.message}}
              </div>
            </div>
          </template>
        </template>
      </a-table>
    </a-card>
    <a-card class="card" title="实时日志记录">


      <a-list item-layout="horizontal" :data-source="dataList" class="scroll-box" >
        <template #renderItem="{ item }">
          <a-list-item>
            <div>
              <p> {{ new Date(item.createTime).toLocaleString() }}</p>
              <a-tag color="green" v-if="item.level==='SUCCESS'">{{ item.typeDesc }}</a-tag>
              <a-tag color="red" v-if="item.level==='ERROR'">{{ item.typeDesc }}</a-tag>
              <span v-html="item.message">
              </span>
            </div>
          </a-list-item>
        </template>
      </a-list>


    </a-card>

  </div>
</template>

<script setup>

import {onDeactivated, onMounted, onUnmounted, reactive, ref} from "vue";
import {baseWs} from "../../data/http.js";
import {syncLogDelAll, syncLogList} from "../../api/client/log.js";

const dataLoading = ref(false)
const currentDataList = ref()
const dataList = ref([])

let socket = null;

onMounted(() => {
  loadData()
  socket = new WebSocket(baseWs)
  socket.onmessage = (e) => {
    dataList.value.splice(0, 0, JSON.parse(e.data))
    // 如果 dataList 中的数据条数超过 100 条，则移除多余的数据
    if (dataList.value.length > 100) {
      dataList.value = dataList.value.slice(0, 100);
    }
  }
})
onUnmounted(() => {
  socket.close()
})
const pagination = reactive({
  keyword: "",
  total: 0,
  current: 1,
  pageSize: 10,
});

const delAll=()=>{
  syncLogDelAll().then(res=>{
    loadData()
  })
}

const loadData = () => {
  currentDataList.value = []
  dataLoading.value = true
  syncLogList(
      pagination
  ).then(res => {
    console.log(res)
    dataLoading.value = false
    currentDataList.value = res.data.records
    pagination.total = res.data.totalRow
    pagination.current = res.data.pageNumber
  }).catch(e => {
    console.log(e)
    dataLoading.value = false
  })
}

const onSearch = () => {
  pagination.current = 1
  loadData()
}

const handleTableChange = (item) => {
  pagination.current = item.current
  pagination.pageSize = item.pageSize
  pagination.total = item.total
  loadData()
}

const columns = [
  {title: 'id', dataIndex: 'id', key: 'id'},
  {title: '消息', dataIndex: 'message', key: 'message'},
  {title: '创建时间', dataIndex: "createTime", key: 'createTime'},
];
</script>

<style lang="less">

.scroll-box{
  height: 80vh;
  overflow-x: scroll;
}

.app-box {
  display: flex;
  justify-content: space-between;

  > .card {
    width: 100%;
    margin: 10px;
    padding: 10px;
  }

  > .card:nth-child(1) {
    flex: 2;
  }

  > .card:nth-child(2) {
    flex: 1;
  }
}
</style>
